<template>
    <div>
       
        
     
      
   <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" > -->
        <div id="viewer">
           
  <!-- <van-swipe-item><img :src="data.img" alt /></van-swipe-item>
  <van-swipe-item><li> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fphoto%2F40125%2F0071.gif_wh300.gif%21%2Fgifto%2Ftrue&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631694155&t=a167c9b59907be111720bdcc36c8c2d2.jpg" alt /></li></van-swipe-item>
  <van-swipe-item> <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fphoto%2F40121%2F7617.gif_wh300.gif%21%2Fgifto%2Ftrue&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631694156&t=e6d2fcc57306d5a5a4e230934c3d05dc.jpg" alt /></li></van-swipe-item>
   -->
      

        </div>
      
 
<!-- </van-swipe> -->
<div class="tabw">
        <h3>{{data.Speciallabel}}</h3>
        <p>均价：{{data.houseArea}}</p>
    </div>
    <div class="tao">
       <p>10套</p>
      <p>2套</p>
      <p>3套</p>
    </div>
    <div class="sales">
        <span>二手房源</span>
        <span>出租房源</span>
        <span>最近成交</span>
    </div>
    <div class="basic">
        <h3>基本信息</h3>
        <p class="address">地址：{{data.area}}</p>
         <p >开发商：{{data.housingName}}</p>
         
         <p >开发商：{{data.detailAddress}}</p>
          
         <p >开发商：{{data.fitment}}</p>
           <p class="address">地址：{{data.area}}</p>
         <p >开发商：{{data.housingName}}</p>
           <p class="address">地址：{{data.area}}</p>
         <p >开发商：{{data.housingName}}</p>
    </div>

   <div>
  <div v-for="(val,i) in list" :key="i" class="tablis">
      <li>
        <img :src="val.img" alt />
      </li>
      <div class="tabf">
        <h3>{{val.listingTitle}}</h3>
        <p>{{val.detailAddress}}</p>
      </div>
    </div>
   </div>
    </div>
</template>
<script>
import {detail,  getRcommendData} from "../api/user.js"
 import {Viewer} from 'photo-sphere-viewer'
     import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
    import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
        import 'photo-sphere-viewer/dist/plugins/markers.css';
export default {
   data(){
       return{
           data:{},
            viewer:'',
     list:[],
         classify: 1,
           imgurl1:require("../../src/assets/26085927-6adc2ef848e5e606.jpg"),
                 imgurl2:require('../assets/26085927-7a49fe8d1485decf.jpg'),
                //   imgurl3:require('../assets/26085927-fa9987c94da5de93.jpg'),
                    imgurl4:require('../assets/src=http___p1.meituan.net_iphoenix_f72fd6fc0eac37a9bbbbe9437fd084a1234642.jpg@1440w_962h_1e_1c_1l&refer=http___p1.meituan.jpg'),
       }
   },
   created(){
       this.sf()
       this.id=this.$route.params.id;
       detail({id:this.id}).then(res=>{
          this.data=res.data
       })
   },
     mounted(){
            this.viewer = new Viewer({
                container:document.querySelector('#viewer'),
                panorama:this.imgurl1,
                size:{
                    width: '100vw',
                    height: '50vh',
                },

                 plugins: [
        [MarkersPlugin, {
            markers: [
                {
                    id:'circle',
                    tooltip:'A circle of radius 30',
                    circle:30,
                    svgStyle : {
                        fill:'rgba(255,255,0,0.3)',
                        stroke:'yellow',
                        strokeWidth:'2px',
                    },
                    longitude: -1.5,
                    latitude: -0.28,
                    anchor: 'center right',
                }
            ],
        }],
    ],
            });
 const markersPlugin = this.viewer.getPlugin(MarkersPlugin);

            markersPlugin.on('select-marker', (e, marker) => {
                this.viewer.animate({
                    longitude: marker.config.longitude,
                    latitude: marker.config.latitude,
                    zoom: 100,
                    speed: '-2rpm',//速度
                }).then(() =>
                    this.viewer.setPanorama(
                        this.imgurl2
                    ).then(() =>
                        markersPlugin.updateMarker({
                            id: marker.id,
                            longitude: -1.8,
                            latitude: -0.28,
                        }),
                        this.viewer.animate({
                            zoom: 50,
                            speed: '2rpm',
                        }).then(() =>
                            this.imgurl2 = this.imgurl3,
                       
                            console.log("继续操作")
                                   )
                    )
                )
            })
            

        },
   methods:{
      sf(){
      getRcommendData( {classify: this.classify * 1}).then(res=>{
          console.log(res)
this.list=res.data
       })   
      }
   }

}
</script>
<style lang="scss">

h3{
    margin-left: 20px;
}
p{
    margin-left: 20px;
}

.lio{
    
    margin-left: 50px;
    margin-top: 20px;
}
span{
    font-size: 20px;
}
.lp{
    display: flex;
    margin-top: 10px;
    justify-content: space-around;
}
.my-swipe li{
    width: 100%;
    height: 200px;
}
.my-swipe li img{
    width: 100%;
    height: 100%;

}
.my-swipe img{
    width: 100%;
    height: 200px;
}
.tabw{
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom:solid 1px #ccc;
    padding: 3px 20px;
}
.tao {
    display: flex;
    justify-content: space-around;
    font-size: 26px;
}
.sales{
    display: flex;
    justify-content: space-around;
    color: #ccc;
    
}
.basic{
    margin-top: 30px;
}
.address{
    margin-top: 15px;
}
.basic p{
    color: #ccc;
}
</style>


 1      2        3         4     5     6  
 新房  二手房    商铺    写字楼  租房   找小区

   3  4  6


{
     classify :this.,
     obj{
         a:0,
         b:300
     }
     obj{
         a:300,
         b:500
     }
     obj{
         a:500,
         b:1000
     }
     obj{
         a:1000,
         b:10000
     }
 }